var drawing = document.getElementById('drawing')
if (drawing.getContext) {
  var context = drawing.getContext('2d')

  // 绘制红色矩形
  context.fillStyle = '#ff0000'
  context.fillRect(10, 10, 50, 50)
  // 绘制半透明的蓝色矩形
  context.fillStyle = 'rgba(0, 0, 255, 0.5)'
  context.fillRect(30, 30, 50, 50)

  // 导出
  var image = document.createElement('img')
  image.src = drawing.toDataURL('image/png')
  document.body.appendChild(image)
}


(function () {
  var drawing = document.getElementById('drawing2')
  if (drawing.getContext) {
    var context = drawing.getContext('2d')
    // 绘制红色描边矩形
    context.strokeStyle = '#ff0000'
    context.strokeRect(10, 10, 50, 50)
    // 绘制半透明的蓝色描边矩形
    context.strokeStyle = 'rgba(0, 0, 255, 0.5)'
    context.strokeRect(30, 30, 50, 50)
  }
}());

(function () {
  var drawing = document.getElementById('drawing3')
  if (drawing.getContext) {
    var context = drawing.getContext('2d')
    // 绘制红色描边矩形
    context.fillStyle = '#ff0000'
    context.fillRect(10, 10, 50, 50)
    // 绘制半透明的蓝色描边矩形
    context.fillStyle = 'rgba(0, 0, 255, 0.5)'
    context.fillRect(30, 30, 50, 50)
    // 在两个矩形重叠的地方清除一个小矩形区域
    context.clearRect(40, 40, 10, 10)
  }
}())